<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
	window.onload = function(){
	function del(){
	console.log(this)
	console.log(delbtn[0])
	if(confirm('确定要删除'+this.parentElement.parentElement.first.innerHTML+'记录吗')){this.parentElement.parentElement.remove();}
    return false;
	}

    var table=document.getElementById('employeeTable');
	var delbtn=table.getElementsByTagName('a');
	
	
	var td1=document.createElement('td');
	var a=document.createElement('a');
	for(i=0;i<delbtn.length;i++){
		delbtn[i].onclick=del}
    var submitbtn=document.getElementById("addEmpButton");
	var empName=document.getElementById('empName');
	var email=document.getElementById('email');
	var salary=document.getElementById('salary');
    submitbtn.onclick=function(){
    if(empName.value&&email.value&&salary.value){
		var tr=document.createElement('tr');
		var td1=document.createElement('td');
		table.appendChild(tr);
		td1.innerHTML=empName.value;
		tr.appendChild(td1);
		var td2=document.createElement('td');
		td2.innerHTML=email.value;
		tr.appendChild(td2);
		var td3=document.createElement('td');
		td3.innerHTML=salary.value;
		tr.appendChild(td3);
		var td4=document.createElement('td');
		td4.innerHTML='<a href="javascript:;">Delete</a>';
		tr.appendChild(td4);
		var tbody=table.getElementsByTagName('tbody');
		tbody.appendChild('tr');
		alert('输入ok');
		//更新delete键
		for(i=0;i<delbtn.length;i++){
		delbtn[i].onclick=del}
	
	}
	else {alert('输入信息有问题')}


	}	

	};

	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>
